<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.tran.name") }}</strong>
    <span @click="$openPage('/kefu')"><img v-lazy="getImg('kefu.png')" alt="" /></span>
  </header>
  <main class="tran">
    <ul>
      <li>
        <el-select v-model="tranForm.coinType" clearable placeholder="Select" size="large" popper-class="write">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </li>
      <li>
        <el-select v-model="tranForm.recordType" clearable placeholder="Select" size="large" popper-class="write">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span></span>
        <el-select v-model="tranForm.activityType" clearable disabled placeholder="Select" size="large"
          popper-class="write">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </li>
      <li>
        <el-date-picker date-format="YYYY-MM-DD" time-format="HH:mm:ss" default-time="00:00:00" class="custom-time"
          popper-class="datetime" v-model="tranForm.startDateTime" type="datetime" placeholder="Pick a Date"
          format="YYYY-MM-DD" />
        <span>~</span>
        <el-date-picker format="YYYY-MM-DD" date-format="YYYY-MM-DD" time-format="HH:mm:ss" default-time="00:00:00"
          class="custom-time" v-model="tranForm.endDateTime" popper-class="datetime" type="datetime"
          placeholder="Pick a Date" />
      </li>
    </ul>
    <dl v-infinite-scroll="initData" :infinite-scroll-immediate="false" infinite-scroll-distance=200
      v-if="recordData.records.length != 0">
      <dd v-for="item in recordData.records" :key="item.recordId">
        <div class="top">
          <template v-if="item.coinType == 0">
            <img src="@/assets/img/mylrft.png" alt="" />
            <strong>BRL</strong>
          </template>
          <template v-else>
            <img src="@/assets/img/t1.png" alt="" />
            <strong>USDT</strong>
          </template>
          <span>{{ item.coins }}</span>
        </div>
        <div class="middle">
          <h3>ID</h3>
          <p>{{ item.recordId }}</p>
        </div>
        <ul class="bottom">
          <li><span>Tipo</span><i>Resgate / Recarga</i></li>
          <li><span>Data</span><i>{{ item.recordTime }}</i></li>
        </ul>
      </dd>
      <!-- <dd>
        <div class="top">
          <img src="@/assets/img/mylrft.png" alt="" />
          <strong>BRL</strong>
          <span>-5.20</span>
        </div>
        <div class="middle">
          <h3>ID</h3>
          <p>03e2d64e-2260-46a0-967a-21e3163c3806</p>
        </div>
        <ul class="bottom">
          <li><span>Tipo</span><i>Resgate / Recarga</i></li>
          <li><span>Data</span><i>2024-03-20 00:03:22</i></li>
        </ul>
      </dd>
      <dd>
        <div class="top">
          <img src="@/assets/img/mylrft.png" alt="" />
          <strong>BRL</strong>
          <span>-5.20</span>
        </div>
        <div class="middle">
          <h3>ID</h3>
          <p>03e2d64e-2260-46a0-967a-21e3163c3806</p>
        </div>
        <ul class="bottom">
          <li><span>Tipo</span><i>Resgate / Recarga</i></li>
          <li><span>Data</span><i>2024-03-20 00:03:22</i></li>
        </ul>
      </dd> -->
    </dl>

    <div class="footer" v-if="!loadingtran && recordData.records.length == 0">
      <img src="@/assets/img/bg2.png" alt="" />
      <p>{{ $t("language.tran.nodata") }}</p>
    </div>
  </main>
</template>
<script setup lang="ts">
import { reactive, getCurrentInstance, watch, ref, onActivated } from "vue";
import { getTime } from "@/utils/common.ts"
import { useI18n } from "vue-i18n";
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
const { proxy } = getCurrentInstance();
const { t } = useI18n();
let info = JSON.parse(localStorage.getItem("info"));
let tranForm = reactive({
  id: info.gameID,
  coinType: 0,
  recordType: 0,
  activityType: 0,
  startDateTime: getTime('-'),
  endDateTime: getTime('-'),
  pageIndex: 1,
  pageSize: 10
})
let recordData = reactive({
  page: {
    pageIndex: 0,
    pageSize: 0,
    totalCount: 0
  },
  records: []
})
//加载loading
let loadingtran = ref(true)
let initData = () => {
  loadingtran.value = true
  proxy.$post("/Assets/v1.0/Accounts/Flow", tranForm).then(({ data }) => {
    recordData.records.push(...data.data.records)
    recordData.page = data.data.page
    tranForm.pageIndex++
    console.log(recordData.records,888);
    
  }).finally(() => {
    let time = setInterval(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      loadingtran.value = false
      clearInterval(time)
    }, 300)
  })
}

// 监听变化从新获取数据
watch([() => tranForm.coinType, () => tranForm.recordType, () => tranForm.endDateTime, () => tranForm.startDateTime, () => tranForm.activityType], () => {
  tranForm.pageIndex = 1
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  recordData.records = []
  initData()
})
onActivated(() => {
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  initData()
})


const options = [
  {
    value: 0,
    label: t("language.tran.all"),
  },
];
const options1 = [
  {
    value: 0,
    label: t("language.tran.all"),
  },
  {
    value: 1,
    label: "BRL",
  },
  {
    value: 2,
    label: "USDT",
  },
];

</script>
<style lang="scss">
.write .el-select-dropdown__item {
  color: #b9bdc9 !important;
  background-color: transparent !important;
}

.write .selected span {
  color: #fff !important;
  background-color: transparent !important;
}

.write .hover {
  color: #fff !important;
}

.write .is-focus {
  border-color: #0a906c !important;
}

.write .el-input--suffix {
  border-color: #0a906c !important;
}

.write .el-tooltip__trigger {
  border-color: #0a906c !important;
}

.write .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.datetime .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.el-input__inner {
  color: #fff !important;
}

.el-input {
  border: none !important;
  box-shadow: none !important;
}

.el-picker-panel__body-wrapper,
.el-picker-panel,
.el-picker-panel__footer,
.el-date-picker,
.el-popper,
.el-time-panel,
.el-popper__arrow::before {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cancel {
  color: #fff !important;
}

.el-time-spinner__item.is-active {
  color: #fff !important;
}

.el-time-panel__btn.confirm {
  color: #0a906c !important;
}

.el-time-panel__footer {
  border-top: none !important;
}

.el-date-table th {
  border-bottom: solid 1px rgb(74, 76, 83) !important;
}

.el-button.is-text {
  color: #fff;
}

.el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}

.el-date-picker__time-header {
  border-bottom: 1px solid rgb(74, 76, 83) !important;
}

.el-time-spinner__item {
  color: #fff !important;
}

.today .el-date-table-cell__text {
  color: #0a906c !important;
  font-weight: normal !important;
  box-shadow: none !important;
  font-weight: bold !important;
}

.el-date-picker__header-label:hover {
  color: #fff !important;
}

.el-year-table td.current:not(.disabled) .cell {
  background-color: #0a906c !important;
}

.el-year-table td.today .cell {
  color: #0a906c !important;
}

.el-month-table td .cell {
  color: #fff !important;
}

.el-month-table td.current:not(.disabled) .cell {
  background-color: #0a906c !important;
}

.current .el-date-table-cell__text {
  color: #fff !important;
  background-color: #0a906c !important;
  font-weight: normal !important;
}

.el-date-picker__header-label {
  color: #fff;
}

.current {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.next-month {
  background-color: rgb(61, 64, 72) !important;
  color: #fff !important;
}

.available {
  color: #fff !important;
}

.datetime .el-scrollbar__view {
  background-color: transparent;
}

/*
.custom-time .el-input__inner {
  color: #fff !important;
}
.custom-time .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}
.custom-time  .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}
.custom-time .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}*/
</style>
<style scoped lang="scss">
/*
::v-deep .el-popper {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
::v-deep .el-popper__arrow::before {
  background-color: rgb(29, 30, 34) !important;
}
::v-deep .available {
  color: #fff !important;
}
::v-deep .el-popper {
  background-color: rgb(61, 64, 72) !important;
  color: #fff !important;
}
::v-deep .el-picker-panel {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
::v-deep .el-picker-panel__footer {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
::v-deep .el-date-picker {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

::v-deep .el-time-panel {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
::v-deep .available {
  color: #fff !important;
}*/

header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    @include flex(row, center, center);
    width: 28px;
    line-height: 28px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.tran {
  background-color: #1a1a1a;
  padding: 45px 0px 20px;
  width: 100%;
  height: 100vh;
  background-color: rgb(26, 26, 26);
  @include flex(column, flex-start, center);

  >ul {
    width: 100%;
    padding: 20px;
    height: 210px;

    :deep(.el-select__wrapper) {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
    }

    :deep(.el-select__selected-item) {
      color: #fff !important;
    }

    :deep(.el-input__wrapper) {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
      height: 40px !important;
    }

    :deep(.el-picker-panel__body-wrapper) {
      background-color: rgb(39, 42, 48) !important;
      color: #fff;
    }

    :deep(.el-input__prefix) {
      color: #fff !important;
    }

    :deep(.el-input__wrapper) {
      color: #fff !important;
    }

    .datetime {
      background-color: 000 !important;
    }

    .write {
      background: rgb(39, 42, 48) !important;
      color: #fff;
    }

    li {
      @include flex(row, center, center);

      span {
        font-size: 16px;
        color: #fff;
        display: block;
        margin: 0 5px;
      }
    }

    li+li {
      margin-top: 20px;
    }

    li:nth-child(1) {
      @include flex(row, center, center);

      :deep(.el-select) {
        width: 200px;
      }
    }

    li:nth-child(2) {
      @include flex(row, center, center);

      span {
        display: block;
        width: 20px;
        text-align: center;
      }

      :deep(.el-select) {
        width: 140px;
      }
    }

    li:nth-child(3) {
      span {
        display: block;
        width: 20px;
        text-align: center;
      }

      :deep(.el-date-editor) {
        width: 140px;
      }
    }
  }

  dl {
    overflow: auto;
    flex: 1;
    padding: 0 15px;
    width: 100%;
    margin-top: 20px;

    dd+dd {
      margin-top: 20px;
    }

    dd {
      background-color: rgb(36, 38, 43);
      border-radius: 10px;
      width: 100%;
      padding: 10px 0;

      >div,
      li {
        padding: 10px 12px;
      }

      .top {
        @include flex(row, flex-start, center);
        width: 100%;
        border-bottom: 1px solid rgba(74, 76, 83, 0.36470588235294116);

        img {
          width: 26px;
          margin-right: 5px;
        }

        strong {
          font-size: 16px;
          color: #fff;
          display: block;
          margin-right: 20px;
        }

        span {
          font-size: 16px;
          color: #b5bac8;
        }
      }

      .middle {
        width: 100%;
        @include flex(column, flex-start, flex-start);

        h3 {
          color: #fff;
          font-weight: normal;
        }

        p {
          color: #b5bac8;
          font-size: 16px;
          margin: 10px 0 16px;
        }
      }

      .bottom {
        width: 100%;

        li {
          width: 100%;
          @include flex(row, space-between, center);

          span {
            color: #fff;
            font-size: 16px;
          }

          i {
            font-style: normal;
            color: #b5bac8;
          }
        }

        li:nth-child(1) {
          background-color: rgba(74, 76, 83, 0.36470588235294116);
        }
      }
    }
  }

  .footer {
    height: 400px;
    @include flex(column, center, center);

    img {
      width: 165px;
      margin: 0 auto;
    }

    p {
      font-size: 16px;
      color: #b5bacb;
      margin-top: 20px;
    }
  }
}
</style>
